<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <!-- 点击查看大图css -->
    <link rel="stylesheet" href="../lib/upload/bigImage.css" media="all">
    <!-- 百度地图css -->
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">      
        <form class="layui-form" action="" lay-filter="template">
            <input type="hidden" name="id" value=${sysTemplateEntity.id} id="id"/>
            <div class="layui-form-item">
                <label class="layui-form-label">单行输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" disabled="" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证必填项</label>
                <div class="layui-input-block">
                    <input type="text" name="username" disabled="" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">验证手机</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="phone" disabled="" lay-verify="required|phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证邮箱</label>
                    <div class="layui-input-inline">
                        <input type="text" name="email" disabled="" lay-verify="email" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">多规则验证</label>
                    <div class="layui-input-inline">
                        <input type="text" name="number" disabled="" lay-verify="required|number" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date" id="date" disabled="" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">验证链接</label>
                    <div class="layui-input-inline">
                        <input type="tel" name="url" lay-verify="url" disabled="" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">验证身份证</label>
                <div class="layui-input-block">
                    <input type="text" name="identity" lay-verify="identity" disabled="" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">自定义验证</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" lay-verify="pass" disabled="" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">范围</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="priceMin" disabled="" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="priceMax" disabled="" placeholder="￥" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单行选择框</label>
                <div class="layui-input-block">
                    <select name="interest" disabled="" lay-filter="aihao">
                        <option value=""></option>
                        <option value="0">写作</option>
                        <option value="1">阅读</option>
                        <option value="2">游戏</option>
                        <option value="3">音乐</option>
                        <option value="4">旅行</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">                
                <div class="layui-inline">
                    <label class="layui-form-label">搜索选择框</label>
                    <div class="layui-input-inline">
                        <select name="modules" disabled="" lay-verify="required" lay-search="">
                            <option value="">直接选择或搜索选择</option>
                            <option value="1">layer</option>
                            <option value="2">form</option>
                            <option value="3">layim</option>
                            <option value="4">element</option>
                            <option value="5">laytpl</option>
                            <option value="6">upload</option>
                            <option value="7">laydate</option>
                            <option value="8">laypage</option>
                            <option value="9">flow</option>
                            <option value="10">util</option>
                            <option value="11">code</option>
                            <option value="12">tree</option>
                            <option value="13">layedit</option>
                            <option value="14">nav</option>
                            <option value="15">tab</option>
                            <option value="16">table</option>
                            <option value="17">select</option>
                            <option value="18">checkbox</option>
                            <option value="19">switch</option>
                            <option value="20">radio</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- <div class="layui-form-item" id="area-picker">
                <div class="layui-form-label">网点地址</div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="province" disabled="" class="province-selector" data-value="${sysTemplateEntity.province?default('')}" lay-filter="province-1">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="city" disabled="" class="city-selector" data-value="${sysTemplateEntity.city?default('')}" lay-filter="city-1">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select name="county" disabled="" class="county-selector" data-value="${sysTemplateEntity.county?default('')}" lay-filter="county-1">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div> -->           
            <div class="layui-form-item" id="area-picker">
		        <label class="layui-form-label required">网点地址</label>
		        <div class="layui-input-block">
			      	<input type="text" name="area" disabled="" lay-verify="" autocomplete="off" class="layui-input">
			    </div>			    
		    </div>
		    <div class="layui-form-item">
		        <label class="layui-form-label required">经纬度</label>
		        <div class="layui-input-block" style="width: 190px">
		        	<input type="text" name="coordinates" id="coordinates" lay-verify="required" placeholder="请输入经纬度"
						   autocomplete="off" class="layui-input" readonly="readonly">
		        </div>
		    </div>

			<div class="layui-form-item">
                <label class="layui-form-label">多选下拉框</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入" autocomplete="off" class="layui-input" id="tableSelect" disabled="" value="${sysTemplateEntity.tableSelect?default('')}" ts-selected="">
                </div>                
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like1" title="写作" disabled="">
                    <input type="checkbox" name="like2" title="阅读" disabled="">
                    <input type="checkbox" name="like3" title="游戏" disabled="">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">原始复选框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like4" lay-skin="primary" title="写作" disabled="">
                    <input type="checkbox" name="like5" lay-skin="primary" title="阅读" disabled="">
                    <input type="checkbox" name="like6" lay-skin="primary" title="游戏" disabled="">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">开关-默认关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF" disabled="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关-默认开</label>
                <div class="layui-input-block">
                    <input type="checkbox" disabled="" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">单选框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked="" disabled="">
                    <input type="radio" name="sex" value="女" title="女" disabled="">
                    <input type="radio" name="sex" value="禁" title="禁用" disabled="">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">普通文本域</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" class="layui-textarea" name="content" disabled=""></textarea>
                </div>
            </div>
            
            <div class="layui-form-item">
            	<label class="layui-form-label">图片信息</label>
            	<div class="layui-input-block">
	   				<div class="cl imglist" id="demo" style="padding-left:110px"></div>
	   			</div>
			</div>
			            
            <div class="layui-form-item">
                <div class="layui-input-block">                   
                    <button class="layui-btn layui-btn-normal" id="cancel">返回列表</button>
                </div>
            </div>                       
        </form>
    </div>
    <div id="maplocation" style="width:500px;height:500px;display: none;"></div>
</div>

<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<!-- 点击查看大图js -->
<script src="../lib/upload/bigImage.js" charset="utf-8"></script>
<!-- 百度地图js -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bjYCivmvHKETZXCaBdDeblvc2M0vgfwD"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script>
    layui.use(['form', 'layedit','layarea','tableSelect'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , layarea = layui.layarea
            , tableSelect = layui.tableSelect
            , $ = layui.$;
        
        /* layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        }); */
        
        layer.ready(function(){
      	   $.post("../sysTemplate/getTemplateById",{'id':$("#id").val()}, function (data) {
      		//表单初始赋值
      	        form.val('template', {
      	            "username": data.username
      	            , "password": data.password
      	            , "interest": 1
      	          	, "title": data.title
    	            , "phone": data.phone
    	            , "email": data.email
    	            , "number": data.number
    	            , "date": data.date
    	            , "url": data.url
    	            , "identity": data.identity
    	            , "priceMin": data.priceMin
    	            , "priceMax": data.priceMax
    	            , "modules": data.modules    	            
      	            , "like1": data.like1 //复选框选中状态
      	          	, "like2": data.like2 //复选框选中状态
      	          	, "like3": data.like3
    	          	, "like4": data.like4
    	          	, "like5": data.like5
    	          	, "like6": data.like6
      	            , "open": data.open //开关状态
      	          	, "close": data.close
      	            , "sex": data.sex
      	            , "content": data.content
      	            , "coordinates": data.coordinates
      	          	, "area": data.area     	          	
      	        })
      	      form.render();
      		});
         });
        
        var iframeIndex = parent.layer.getFrameIndex(window.name);
        
      //加载地图选取坐标
        $("#coordinates").on("click", function () {
     	   var index = layer.open({
                title: '地图',
                type: 1,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: '500px',
                content:$('#maplocation'),              
                success:function(){
                    var map = new BMap.Map("maplocation"); // 创建地图实例

                    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                    var coordinates=$("#coordinates").val().split(",");
                    var lnt=parseFloat(coordinates[0]);
                    var lng=parseFloat(coordinates[1]);
                    var point = new BMap.Point(lnt,lng); // 创建点坐标
                    map.centerAndZoom(point, 12);                  

                    var marker = new BMap.Marker(map.getCenter());  // 创建标注
                    map.addOverlay(marker);               // 将标注添加到地图中
                    marker.enableDragging();                //可拖拽                 

                    //加载完成之后,改变标注点坐标,使之和当前定位的城市基本相符
                    map.addEventListener("tilesloaded",function(){
                        var newpoint = map.getCenter();
                        marker.setPosition(newpoint);
                    });
                 }
             });
         });
        //图片显示
        var testPic = "${sysTemplateEntity.pic?default('')}".split(",");
        var arrPic = new Array();
        if(testPic!=""&&testPic.length > 0){
        	for (let i = 0; i < testPic.length; i++) {
        		arrPic.push(testPic[i]+"?id="+i);
        	}
        }
        var imgulp = new bigImage({
        	listid:"demo",//页面图片列表ID
        	thumbherf:"",//列表图片前缀
        	bigherf:"",//原图前缀[同列表图相同时，省略]
        	jsondata:false,
        	imgsrcarr:arrPic,
        });
        
        $('#cancel').on("click", function () {
            parent.layer.close(iframeIndex);
       });
    });
    
     /* $(function(){
    	var testPic = "${sysTemplateEntity.pic?default('')}".split(",");
        if(testPic!=""&&testPic.length > 0){
            for (let i = 0; i < testPic.length; i++) {
                console.log(testPic[i]);
                $("#demo").append("<div class=\"layui-upload layui-inline\"><div class=\"layui-upload-list\">"+
        		        "<img onclick=\"showBigImage(this)\" class=\"layui-upload-img\" src=\""+testPic[i]+"\" style=\"width:100px;height:100px\"></div></div>");	        
        	    }
        }              
	});
    
  //显示大图片
    function showBigImage(e) {
    	//页面层
        layer.open({
            type: 1,
            skin: 'layui-layer-rim', //加上边框
            area: ['500px', '500px'], //宽高
            title: '图片信息',
            shadeClose: true, //开启遮罩关闭
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align:center;padding-top:30px"><img style="width:400px;height:400px" src="' + $(e).attr('src') + '" /></div>'
        });
    } */
  
</script>
</body>
</html>